<template>
  <div class="dashboardEditor">
    <el-row class="header">
      <el-col :span="18">
        <div class="header-title">
          <img class="icon" src="@/assets/images/dashboard/title_01.png" alt="">
          <span class="name">订单数据</span>
        </div>
        <div class="header-content header-contentB">
          <el-col :span="4">
            <div class="num">{{ setSemicolon(boardData.today_order_number, 0) }}</div>
            <div class="tip">今日客户订单数</div>
          </el-col>
          <el-col :span="4">
            <div class="num">{{ setSemicolon(boardData.yesterday_order_number, 0) }}</div>
            <div class="tip">昨日客户订单数</div>
          </el-col>
          <el-col :span="4">
            <div class="num">{{ setSemicolon(boardData.daijie_order_number, 0) }}</div>
            <div class="tip">待接单数</div>
          </el-col>
          <el-col :span="4">
            <div class="num">{{ setSemicolon(boardData.daifa_order_number, 0) }}</div>
            <div class="tip">待发货订单数</div>
          </el-col>
          <el-col :span="4">
            <div class="num">{{ setSemicolon(boardData.yifa_order_number, 0) }}</div>
            <div class="tip">已发货订单数</div>
          </el-col>
          <el-col :span="4">
            <div class="num">{{ setSemicolon(boardData.order_after_number, 0) }}</div>
            <div class="tip">售后订单数</div>
          </el-col>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="header-title">
          <img class="icon" src="@/assets/images/dashboard/title_02.png" alt="">
          <span class="name">商品数据</span>
        </div>
        <div class="header-content">
          <el-col :span="12">
            <div class="num">{{ setSemicolon(boardData.sale_goods_number, 0) }}</div>
            <div class="tip">上架商品数</div>
          </el-col>
          <el-col :span="12">
            <div class="num">{{ setSemicolon(boardData.check_goods_number, 0) }}</div>
            <div class="tip">待审核商品</div>
          </el-col>
        </div>
      </el-col>
    </el-row>


    <div class="nav">
      <div class="nav-li data">
        <div class="card">
          <div class="card-title">
            <div class="title">供应商排行</div>
            <div class="tabs">
              <div class="tabs-li" :class="supplierData.type == 1 ? 'tabs-select' : ''" @click="supplierBoard(1)">商品数
              </div>
              <div class="tabs-li" :class="supplierData.type == 2 ? 'tabs-select' : ''" @click="supplierBoard(2)">订单数
              </div>
            </div>
          </div>
          <div class="card-content">
            <line-supplier :chart-data="supplierData" :s-name="supplierData.type == 1 ? '商品数' : '订单数'" />
          </div>
        </div>

        <div class="card">
          <div class="card-title">
            <div class="title">订单趋势</div>
            <div class="tabs">
              <div class="tabs-li" :class="orderData.type == 1 ? 'tabs-select' : ''" @click="orderBoard(1)">日
              </div>
              <div class="tabs-li" :class="orderData.type == 2 ? 'tabs-select' : ''" @click="orderBoard(2)">月
              </div>
            </div>
          </div>
          <div class="card-content">
            <line-chart :chart-data="orderData" s-name="每日" />
          </div>
        </div>
      </div>
      <div class="nav-li menu">
        <div class="card">
          <div class="card-title">
            <div class="title">快捷操作</div>
          </div>
          <el-row class="card-content">
            <el-col :span="8" v-for="(item, index) in navigationList" :key="index">
              <div class="navigation" @click="linkRouter(item.url)">
                <div class="navigation-icon">
                  <svg-icon :icon-class="item.svg" />
                </div>
                <!-- <el-image :src="require('@/assets/images/dashboard/' + item.icon + '.png')" alt="" /> -->
                <div class="navigation-tip">{{ item.title }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="card">
          <div class="card-title">
            <div class="title">应收应付数据</div>
          </div>
          <div class="card-content">
            <div class="money">
              <div class="money-content">
                <img class="icon" src="@/assets/images/dashboard/li_01.png" alt="" />
                <div class="tip">本月已付款金额</div>
              </div>
              <div class="money-num">{{ setSemicolon(boardData.huikuan_all_money, 2) }}</div>
            </div>
            <div class="money">
              <div class="money-content">
                <img class="icon" src="@/assets/images/dashboard/li_02.png" alt="" />
                <div class="tip">待回款客户数</div>
              </div>
              <div class="money-num">{{ setSemicolon(boardData.huikuan_customer, 0) }}</div>
            </div>
            <div class="money">
              <div class="money-content">
                <img class="icon" src="@/assets/images/dashboard/li_03.png" alt="" />
                <div class="tip">待付款总金额</div>
              </div>
              <div class="money-num">{{ setSemicolon(boardData.fukuan_all_money, 2) }}</div>
            </div>
            <div class="money">
              <div class="money-content">
                <img class="icon" src="@/assets/images/dashboard/li_04.png" alt="" />
                <div class="tip">待付款供应商数</div>
              </div>
              <div class="money-num">{{ setSemicolon(boardData.fukuan_supplier, 0) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- dashboard -->
  </div>
</template>

<script>
import { setSemicolon } from "@/utils/index";
import { mapGetters } from "vuex";
import { dataBoard, supplierBoard, orderBoard } from '@/api/common'

import LineChart from './components/LineChart'
import LineSupplier from './components/LineSupplier'

export default {
  name: "DashboardEditor",
  components: {
    LineChart,
    LineSupplier
  },
  data() {
    return {
      navigationList: [{
        svg: 'board_01',
        icon: 'menu_01',
        title: '代客户下单',
        url: '/order/customer/assist'
      }, {
        svg: 'board_02',
        icon: 'menu_02',
        title: '查看客户订单',
        url: '/order/customer/index'
      }, {
        svg: 'board_03',
        icon: 'menu_03',
        title: '查看供应商订单',
        url: '/order/supplier'
      }, {
        svg: 'board_04',
        icon: 'menu_04',
        title: '查看售后订单',
        url: '/order/sales'
      }, {
        svg: 'board_05',
        icon: 'menu_05',
        title: '回款管理',
        url: '/settle/hui'
      }, {
        svg: 'board_06',
        icon: 'menu_06',
        title: '付款管理',
        url: '/settle/fu'
      }],
      boardData: {
        check_goods_number: "0",
        daifa_order_number: "0",
        daijie_order_number: "0",
        fukuan_all_money: 0,
        fukuan_supplier: 0,
        huikuan_all_money: 0,
        huikuan_customer: 0,
        order_after_number: "0",
        sale_goods_number: "0",
        today_order_number: "0",
        yesterday_order_number: "0",
        yifa_order_number: "0"
      },
      supplierData: {
        type: 1,
        xData: [],
        sData: []
      },
      orderData: {
        type: 1,
        xData: [],
        sData: []
      },
    };
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles"]),
    getHeaders() {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, });
      });
    }
  },
  mounted() {
    this.dataBoard()
    this.supplierBoard()
    this.orderBoard()
  },
  methods: {
    supplierBoard(type = 1) {
      this.supplierData.type = type;
      let xData = new Array(), sData = new Array()
      supplierBoard({ type: type }).then(res => {
        res.data.forEach(e => {
          sData.push(e.s_name)
          xData.push(Number(e.number))
        })
        this.supplierData.xData = xData
        this.supplierData.sData = sData
      })
    },
    orderBoard(type = 1) {
      this.orderData.type = type;
      let xData = new Array(), sData = new Array()
      orderBoard({ type: type }).then(res => {
        res.data.forEach(e => {
          xData.push(type == 1 ? e[0].substring(5, 10) : e[0].substring(0, 7))
          sData.push(Number(e[1]))
        })
        this.orderData.xData = xData
        this.orderData.sData = sData
      })
    },
    dataBoard() {
      dataBoard({}).then(res => {
        if (res.status == 1) {
          this.boardData = res.data;
        }
      })
    },
    linkRouter(url) {
      this.$router.push({
        path: url
      })
    },
    setSemicolon(str, toFixed) {
      return setSemicolon(Number(str).toFixed(toFixed))
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboardEditor {
  .nav {
    display: flex;
    padding-top: 16px;

    &-li {
      .card {
        background: #ffffff;
        padding: 20px;
        margin-bottom: 16px;

        &-title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 16px;
            color: #1D2129;
            font-weight: 600;
          }

          .tabs {
            display: flex;
            border: 1px solid #E6E7E9;
            border-radius: 4px;
            overflow: hidden;

            &-li {
              width: 60px;
              font-size: 14px;
              text-align: center;
              padding: 8px 0;
              cursor: pointer;
            }

            &-select {
              background: linear-gradient(163deg, rgba(149, 205, 248, 0.99) 0%, #2C9EF4 100%);
              color: #ffffff;
            }
          }
        }

        &-content {
          padding-top: 8px;

          .navigation {
            padding: 8px 0;
            cursor: pointer;
            color: #424E66;

            &-icon {
              width: 32px;
              height: 32px;
              margin: 0 auto 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #F7F8FA;
              border-radius: 4px;
            }

            &-tip {
              font-size: 12px;
              
              text-align: center;
            }
          }
          .navigation:hover{
            color: #37A6E5;
          }

          .money {
            background: #F7F8FA;
            border-radius: 6px;
            margin: 16px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px 10px 5px;

            &-content {
              display: flex;
              align-items: center;

              .icon {
                display: block;
                width: 48px;
                height: 48px;
              }

              .tip {
                font-size: 12px;
                color: #4E5969;
                margin-left: 4px;
              }
            }

            &-num {
              font-size: 18px;
              color: #37A6E5;
              font-weight: 600;
            }
          }
        }
      }
    }

    .data {
      flex: 1;
    }

    .menu {
      width: 300px;
      margin-left: 16px;
    }
  }

  .header {
    background: #fff;
    padding: 24px 18px;

    &-title {
      display: flex;
      align-items: center;
      padding-bottom: 16px;

      .icon {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }

      .name {
        color: #1D2129;
        font-weight: 600;
        font-size: 16px;
      }
    }

    &-content {
      width: 100%;

      .num {
        font-size: 24px;
        color: #000000;
        font-weight: 600;
      }

      .tip {
        font-size: 12px;
        color: #4E5969;
        padding-top: 4px;
      }
    }
  }

  .header-contentB {
    padding: 0 24px 0 6px;

  }

  .header-contentB::after {
    content: '';
    display: block;
    border-right: 1px solid #E9EEF1;
    height: 48px;
  }
}
</style>